<template>
  <div class="app">
    App
    <hr>
    <div>
      计数数量: {{ count }}，双倍值: {{ doubleCount }}
      <button @click="add()">加</button>
      <button @click="minus">减</button>
      <button @click="asyncAdd(5)">异步加</button>
    </div>
  </div>
</template>

<!-- <script>
export default {
  name: 'App',
  // 通常将 store 中的 state、getters 的值映射到组件的 computed 中
  created() {
    console.log('App:', this.$store)
  },
  computed: {
    count() {
      return this.$store.state.counter.count
    },
    doubleCount() {
      return this.$store.getters['counter/doubleCount']
    },
  },
  methods: {
    add() {
      // 组件中不能直接调用到 mutation 方法，而是需要提交 mutation。
      // 提交 mutation 与触发事件类似
      this.$store.commit('counter/add', 5)
    },
    minus() {
      this.$store.commit('counter/minus')
    },
    asyncAdd() {
      // 组件中不能直接调用到 action 方法，是需要使用
      // store.dispatch() 来触发 action 调用
      this.$store.dispatch('counter/asyncAdd')
    },
  },
}
</script> -->

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  name: 'App',
  // 通常将 store 中的 state、getters 的值映射到组件的 computed 中
  computed: {
    ...mapState('counter', ['count']),
    ...mapGetters('counter', ['doubleCount']),
  },
  methods: {
    ...mapMutations('counter', ['add', 'minus']),
    ...mapActions('counter', ['asyncAdd']),
  },
}
</script>

<style scoped>

</style>
